<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>朵朵两岁了</title>
    <link rel="stylesheet" href="lib/swiper-3.4.2.min.css">
    <link rel="stylesheet" href="lib/animate.css">
    <link rel="stylesheet" href="css/all.css">
    <link rel="stylesheet" href="css/page1.css">
    <link rel="stylesheet" href="css/page2.css">
    <link rel="stylesheet" href="css/page3.css">
    <link rel="stylesheet" href="css/page4.css">
    <link rel="stylesheet" href="css/page5.css">
    <script src="lib/jquery-1.10.1.min.js"></script>
    <script src="lib/swiper.jquery.min.js"></script>
    <script src="lib/swiper.animate1.0.2.min.js"></script>


    <script>
        window.onload = function () {
            getRem(320, 100)
        };
        window.onresize = function () {
            getRem(320, 100)
        };

        function getRem(pwidth, prem) {
            var html = document.getElementsByTagName("html")[0];
            var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
            html.style.fontSize = oWidth / pwidth * prem + "px";
        }
    </script>
</head>

<body>
    <div class="swiper-container">

        <div class="swiper-wrapper">
            <!-- 第一页 -->
            <div class="swiper-slide">
                <div class="top ani" swiper-animate-effect="flipInX" swiper-animate-duration="1s"
                    swiper-animate-delay="0s">
                    <img src="img/title.webp" alt="">
                </div>
                <div class="xiannv ani infinite" swiper-animate-effect="swing" swiper-animate-duration="1s"
                    swiper-animate-delay="0s">
                    <img src="img/xiannvbang.webp" alt="">
                </div>
                <div class="ani back1" swiper-animate-effect="fadeIn" swiper-animate-duration="2s"
                    swiper-animate-delay="0s"></div>
                <div class="page1 ani" swiper-animate-effect="flipInX" swiper-animate-duration="2s"
                    swiper-animate-delay="0s">
                    <img src="img/page1.png" alt="">
                </div>
                <div class="ani hudie1" swiper-animate-effect="fadeIn" swiper-animate-duration="2s"
                    swiper-animate-delay="1s">
                    <div class="ani hudie2" swiper-animate-effect="shake" swiper-animate-duration="2s"
                        swiper-animate-delay="3s">
                        <img src="img/hudiejie.webp" alt="">
                    </div>
                </div>
                <div class="banner ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="1s"
                    swiper-animate-delay="0s">
                    <img src="img/banner7v.webp" alt="">
                </div>
                <div class="hpb">
                    <p class="fhpb ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="1s"
                        swiper-animate-delay="1s">生</p>
                    <p class="fhpb ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="1s"
                        swiper-animate-delay="1.5s">日</p>
                    <p class="fhpb ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="1s"
                        swiper-animate-delay="2s">快</p>
                    <p class="fhpb ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="1s"
                        swiper-animate-delay="2.5s">乐</p>
                </div>

                <div class="ani infinite bling" swiper-animate-effect="flash" swiper-animate-duration="2s"
                    swiper-animate-delay="0s">
                    <img src="img/bling.webp">
                </div>
                <div class="foot ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s"
                    swiper-animate-delay="0s">
                    <img src="img/foot.webp" alt="">
                </div>
            </div>

            <!-- 第二页 -->
            <div class="swiper-slide">
                <div class="pic1w ani" swiper-animate-effect="fadeIn" swiper-animate-duration="1s"
                    swiper-animate-delay="0s"></div>
                <div class="pic1 ani" swiper-animate-effect="fadeIn" swiper-animate-duration="1s"
                    swiper-animate-delay="0.5s">
                    <img src="img/pic2.png" alt="">
                </div>

                <div class="pic2w ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="1s"
                    swiper-animate-delay="1s"></div>
                <div class="pic2 ani" swiper-animate-effect="bounceInLeft" swiper-animate-duration="1s"
                    swiper-animate-delay="1s">
                    <img src="img/pic1.png" alt="">
                </div>

                <div class="huangguan ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="1s"
                    swiper-animate-delay="1s">
                    <div class="ani infinite" swiper-animate-effect="pulse" swiper-animate-duration="1s"
                        swiper-animate-delay="2s">
                        <img src="img/huangguan.webp" alt="">
                    </div>
                </div>

                <div class="lovely ani" swiper-animate-effect="bounceInRight" swiper-animate-duration="1s"
                    swiper-animate-delay="1s">
                    <div class="ani infinite" swiper-animate-effect="swing" swiper-animate-duration="1s"
                        swiper-animate-delay="2s">
                        <img src="img/lovely.webp" alt="">
                    </div>
                </div>

                <div class="yunduo ani" swiper-animate-effect="flipInX" swiper-animate-duration="1s"
                    swiper-animate-delay="0s">
                    <img src="img/yunduo2.webp" alt="">
                </div>

                <div class="gongzhu ani" swiper-animate-effect="flipInY" swiper-animate-duration="1s"
                    swiper-animate-delay="1s">
                    <img src="img/gongzhu.webp" alt="">
                </div>
                <div class="jiyu">
                    <p class="ani zi" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.3s"
                        swiper-animate-delay="1s">
                        我
                    </p>
                    <p class="ani zi" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.3s"
                        swiper-animate-delay="1.3s">
                        的
                    </p>
                    <p class="ani zi" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.3s"
                        swiper-animate-delay="1.6s">
                        小
                    </p>
                    <p class="ani zi" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.3s"
                        swiper-animate-delay="1.9s">
                        公
                    </p>
                    <p class="ani zi" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.3s"
                        swiper-animate-delay="2.2s">
                        主
                    </p>
                    <p class="ani zi" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.3s"
                        swiper-animate-delay="2.5s">
                        ，
                    </p>
                    <p class="ani zi" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.3s"
                        swiper-animate-delay="2.8s">
                        愿
                    </p>
                    <p class="ani zi" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.3s"
                        swiper-animate-delay="3s">
                        你
                    </p>
                    <p class="ani zi" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.3s"
                        swiper-animate-delay="3.2s">
                        永
                    </p>
                    <p class="ani zi" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.3s"
                        swiper-animate-delay="3.4s">
                        远
                    </p>
                    <p class="ani zi" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.3s"
                        swiper-animate-delay="3.6s">
                        开
                    </p>
                    <p class="ani zi" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.3s"
                        swiper-animate-delay="3.8s">
                        心
                    </p>
                    <p class="ani zi" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.3s"
                        swiper-animate-delay="4s">
                        ...
                    </p>
                    <p class="ani zi" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.3s"
                        swiper-animate-delay="4.2s">
                        ...
                    </p>
                </div>

                <div class="top ani" swiper-animate-effect="flipInX" swiper-animate-duration="1s"
                    swiper-animate-delay="0s">
                    <img src="img/title.webp" alt="">
                </div>
                <div class="ani infinite bling" swiper-animate-effect="flash" swiper-animate-duration="1s"
                    swiper-animate-delay="0s">
                    <img src="img/bling.webp">
                </div>
                <div class="foot ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s"
                    swiper-animate-delay="0s">
                    <img src="img/foot.webp" alt="">
                </div>
            </div>


            <!-- 第三页 -->
            <div class="swiper-slide">

                <div class="img31 ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="1s"
                    swiper-animate-delay="0.5s">
                    <img src="img/IMG_6342.JPG" alt="">
                </div>

                <div class="img32 ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s"
                    swiper-animate-delay="0.5s">
                    <img src="img/IMG_6345.JPG" alt="">
                </div>

                <div class="kuang3 ani " swiper-animate-effect="flipInY" swiper-animate-duration="1s"
                    swiper-animate-delay="1s">
                    <img src="img/kuang3.webp" alt="">
                    <div class="huangguan3 ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="1s"
                        swiper-animate-delay="1.5s">
                        <img src="img/huangguan.webp" alt="">
                    </div>
                    <div class="tongn ani" swiper-animate-effect="fadeIn" swiper-animate-duration="1s"
                        swiper-animate-delay="1.5s">
                        童年，是欢乐的海洋。在回忆的大海，有无数的珍珠，也有灰暗的，勾起一段伤心的往事；有灿烂的，使人想起童年趣事。
                    </div>
                </div>

                <div class="pinkBanner ani" swiper-animate-effect="zoomInLeft" swiper-animate-duration="1s"
                    swiper-animate-delay="0s"></div>

                <div class="top ani" swiper-animate-effect="flash" swiper-animate-duration="1s"
                    swiper-animate-delay="0s">
                    <img src="img/title.webp" alt="">
                </div>

                <div class="ani infinite bling" swiper-animate-effect="flash" swiper-animate-duration="1s"
                    swiper-animate-delay="0s">
                    <img src="img/bling.webp">
                </div>
            </div>

            <!-- 第四页 -->
            <div class="swiper-slide">

                <div class="hqq ani infinite qq" swiper-animate-effect="slideInUp" swiper-animate-duration="1.9s"
                    swiper-animate-delay="0s">
                    <img src="img/hqq.webp" alt="">
                </div>
                <div class="zqq ani infinite qq" swiper-animate-effect="slideInUp" swiper-animate-duration="1.3s"
                    swiper-animate-delay="0s">
                    <img src="img/zqq.webp" alt="">
                </div>
                <div class="rqq ani infinite qq" swiper-animate-effect="slideInUp" swiper-animate-duration="1.7s"
                    swiper-animate-delay="0s">
                    <img src="img/rqq.webp" alt="">
                </div>

                <div class="ani back41" swiper-animate-effect="bounceInLeft" swiper-animate-duration="2s"
                    swiper-animate-delay="0s"></div>
                <div class="page41 ani" swiper-animate-effect="bounceInRight" swiper-animate-duration="2s"
                    swiper-animate-delay="0s">
                    <img src="img/pic3.png" alt="">
                </div>
                <div class="ani back42" swiper-animate-effect="bounceInRight" swiper-animate-duration="2s"
                    swiper-animate-delay="0s"></div>
                <div class="page42 ani" swiper-animate-effect="bounceInLeft" swiper-animate-duration="2s"
                    swiper-animate-delay="0s">
                    <img src="img/pic4.png" alt="">
                </div>


                <div class="chengbao ani" swiper-animate-effect="fadeIn" swiper-animate-duration="1s"
                    swiper-animate-delay="0s">
                    <img src="img/chengbao.webp" alt="">
                </div>
                <div class="caoping ani" swiper-animate-effect="fadeIn" swiper-animate-duration="1s"
                    swiper-animate-delay="0s">
                    <img src="img/caodi.webp" alt="">
                </div>

                <div class="top ani" swiper-animate-effect="flipInX" swiper-animate-duration="1s"
                    swiper-animate-delay="0s">
                    <img src="img/title.webp" alt="">
                </div>
                <div class="ani infinite bling" swiper-animate-effect="flash" swiper-animate-duration="1s"
                    swiper-animate-delay="0s">
                    <img src="img/bling.webp">
                </div>
            </div>

            <!-- 第五页 -->
            <div class="swiper-slide">

                <div class="wel ani" swiper-animate-effect="fadeIn" swiper-animate-duration="1s"
                    swiper-animate-delay="0s">
                    <img src="img/welcome.webp" alt="">
                    <div class="welcome ani" swiper-animate-effect="lightSpeedIn" swiper-animate-duration="1s"
                        swiper-animate-delay="1s">
                        欢迎您
                    </div>
                </div>
                <div class="address ani" swiper-animate-effect="flipInX" swiper-animate-duration="1s"
                    swiper-animate-delay="0.5s">
                    <img src="img/address.webp" alt="">
                    <div class="add ani" swiper-animate-effect="fadeIn" swiper-animate-duration="1s"
                        swiper-animate-delay="1.5s">
                        欢迎各位亲朋好友来参加<br>
                        小公主的生日宴会
                    </div>
                </div>

                <div class="hygz ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="1.5s"
                    swiper-animate-delay="0s">
                    <img src="img/huanying.webp" alt="">
                </div>

                <div class="fyc ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="2s"
                    swiper-animate-delay="0s">
                    <img src="img/fyuncai.webp" alt="">
                </div>
                <div class="hyc ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1.5s"
                    swiper-animate-delay="0s">
                    <img src="img/hyuncai.webp" alt="">
                </div>

                <div class="top ani" swiper-animate-effect="flipInX" swiper-animate-duration="1s"
                    swiper-animate-delay="0s">
                    <img src="img/title.webp" alt="">
                </div>
                <div class="ani infinite bling" swiper-animate-effect="flash" swiper-animate-duration="1s"
                    swiper-animate-delay="0s">
                    <img src="img/bling.webp">
                </div>
            </div>

        </div>

        <!-- 如果需要滚动条 -->
        <div class="swiper-scrollbar"></div>
    </div>
</body>
<script>
    var mySwiper = new Swiper('.swiper-container', {
        direction: 'vertical',
        loop: false,
        // 如果需要滚动条
        scrollbar: '.swiper-scrollbar',
        onInit: function (swiper) { //Swiper2.x的初始化是onFirstInit
            swiperAnimateCache(swiper); //隐藏动画元素 
            swiperAnimate(swiper); //初始化完成开始动画
        },
        onSlideChangeEnd: function (swiper) {
            swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
        }
    })


    // https://gitee.com/carlyang906/duoduo_is_two_years_old
</script>

</html>